<template>
  <div class="flex h-full w-full flex-col justify-between p-5">
    <div>
      <div class="text-2xl font-bold">菜品管理</div>
      <div class="mt-4 flex items-center justify-between rounded-lg border p-5">
        <div class="flex items-center">
          <div class="mr-8 flex w-64 items-center">
            <div class="whitespace-nowrap">菜品名称：</div>
            <el-input v-model="input" placeholder="请输入菜名"></el-input>
          </div>
          <div class="flex w-56 items-center">
            <div class="whitespace-nowrap">状态：</div>
            <el-select v-model="status" placeholder="请选择状态"></el-select>
          </div>
        </div>
        <div class="flex items-center">
          <el-button type="primary">查询</el-button>
          <el-button type="success" @click="handleAdd">添加菜品</el-button>
        </div>
      </div>
      <div class="mt-4 flex h-[calc(100vh-310px)] flex-col">
        <el-table :data="tablePageData" height="100%" style="width: 100%">
          <el-table-column prop="name" label="菜品名称" width="180" />
          <el-table-column label="菜品图片" width="180">
            <template #default="scope">
              <img :src="scope.row.banner" width="60%" />
            </template>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="180" />
          <el-table-column prop="price" label="价格" width="180" />
          <el-table-column prop="category" label="分类" />
          <el-table-column label="操作" width="180">
            <template #default="scope">
              <div>
                <el-button
                  type="primary"
                  size="small"
                  @click="handleEdit(scope)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="handleDelete(scope)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="mt-4">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 100]"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
  <div>
    <el-dialog
      v-model="showDialog"
      v-if="showDialog"
      :title="editOrAdd"
      width="500"
      destroy-on-close
      draggable
    >
      <div>
        <el-form
          v-model="form"
          ref="ruleFormRef"
          label-width="auto"
          max-width="600"
        >
          <el-form-item label="菜品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="菜品图片">
            <el-input v-model="form.banner"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="form.price"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="form.status"></el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-input v-model="form.category"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="handeOk"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import {
  ElInput,
  ElSelect,
  ElButton,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElDialog,
  ElForm,
  ElFormItem,
} from 'element-plus';
const input = ref();
const status = ref();
const editOrAdd = ref('');
const form = reactive({
  id: '',
  name: '',
  banner: '',
  status: '',
  price: '',
  category: '',
});
const currentPage = ref(1);
const pageSize = ref(10);
const tableData = ref([]);
const showDialog = ref(false);
for (let i = 0; i < 100; i++) {
  tableData.value.push({
    id: i,
    name: `菜品名称${i}`,
    banner:
      'https://ts2.tc.mm.bing.net/th/id/OSK.a4f37f32d896cc56c1fd43c4310ac01e?w=573&h=459&c=7&rs=1&qlt=80&o=6&cdv=1&dpr=2&pid=16.1',
    status: `状态${i}`,
    category: `分类${i}`,
    price: i,
  });
}

const tablePageData = ref([]);

const handePageChange = () => {
  const startIndex = (currentPage.value - 1) * pageSize.value;
  tablePageData.value = tableData.value.slice(
    startIndex,
    startIndex + pageSize.value,
  );
};

const handleSizeChange = (val) => {
  pageSize.value = val;
  handePageChange();
};

const handleCurrentChange = (val) => {
  currentPage.value = val;
  handePageChange();
};

const handeOk = () => {
  console.log(form);
  console.log(editOrAdd.value);
  showDialog.value = false;
  if (editOrAdd.value === '添加菜品') {
    tableData.value.unshift(form);
  } else {
    tableData.value.forEach((item, index) => {
      if (item.id === form.id) {
        tableData.value.splice(index, 1, { ...form });
      }
    });
  }
  handePageChange();
};
const handleEdit = (scope) => {
  editOrAdd.value = '编辑菜品';
  showDialog.value = true;
  form.id = scope.row.id;
  form.name = scope.row.name;
  form.banner = scope.row.banner;
  form.status = scope.row.status;
  form.price = scope.row.price;
  form.category = scope.row.category;
};

const handleDelete = (scope) => {
  tableData.value.splice(tableData.value.indexOf(scope.row), 1);
  handePageChange();
};

const handleAdd = () => {
  editOrAdd.value = '添加菜品';
  showDialog.value = true;
  form.name = '';
  form.banner = '';
  form.status = '';
  form.price = '';
  form.category = '';
};

onMounted(() => {
  handePageChange();
});
</script>
